<template>
  <div id="changeLoginPass">
    <el-card shadow="hover">
      <div class="header">修改登录密码</div>
      <el-form :model="editLogin"  :rules="rules" ref="ruleForm" label-width="30%" class="demo-ruleForm">
        <el-form-item label="原密码：" prop="before">
          <el-input type="password" v-model="editLogin.before" placeholder="请输入原密码" show-password clearable> </el-input>
        </el-form-item>
        <el-form-item label="新密码：" prop="new">
          <el-input type="password" v-model="editLogin.new" placeholder="请输入新密码"  show-password clearable> </el-input>
        </el-form-item>
        <el-form-item label="确认密码：" prop="reNewLogin">
          <el-input v-model="editLogin.reNewLogin" placeholder="请再次输入新密码"  show-password clearable  @keyup.enter.native="editLoginPass('ruleForm')"> </el-input>
        </el-form-item>
        <el-form-item>
          <el-button id="modifyBtn" type="warning" @click="editLoginPass('ruleForm')">修 改</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import request from '../../utils/request'
  import { Message } from 'element-ui';
  export default {
    name: "modifyLoginPassword",
    data(){
      var validateBefore = (rule, value, callback) => {
        this.checkICPassCommon(value,callback)
      };
      var validateNew = (rule, value, callback) => {
        this.checkICPassCommon(value,callback)
      };
      var checkReNewLogin = (rule, value, callback) => {
        this.checkICPassCommon(value,callback)
      };
      return{
        editLogin:{
          before:"",
          new:"",
          reNewLogin:""
        },
        rules: {
          before: [
            { validator: validateBefore, trigger: 'blur' }
          ],
          new: [
            { validator: validateNew, trigger: 'blur' }
          ],
          reNewLogin: [
            { validator: checkReNewLogin, trigger: 'blur' }
          ]
        }
      }
    },
    methods:{
      //验证
      checkICPassCommon(value,callback){
        if (!value) {
          return callback(new Error('密码不能为空'));
        }else if(value.length <6){
          return callback(new Error('密码长度不能小于6位'));
        }else{
          callback();
        }
      },
      // 修改密码
      editLoginPass(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            let that = this;
            if (that.editLogin.new !== that.editLogin.reNewLogin) {
              Message.warning('两次输入的新密码不一样，请核对');
              return false;
            } else {
              request({
                method: 'post',
                url: 'admin/admin/change/password',
                params: {
                  password: that.editLogin.before,
                  newPassword: that.editLogin.new
                }
              }).then(function (res) {
                if (res.code === 200) {
                  Message.success('密码修改成功');
                  that.editLogin.new = '';
                  that.editLogin.before = '';
                  that.editLogin.reNewLogin = ''
                }
              }).catch(function (error) {
                console.log(error);
              });
            }
          } else {
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped>
  @import "../../assets/css/systemManagement/modifyLoginPassword.css";
</style>
